<template>
  <div class="filters">
    <el-row type="flex" class="filters-top" justify="space-between" align="middle">
      <el-col :span="8">单程：{{ $route.query.departCity }} - {{ $route.query.destCity }} / {{ $route.query.departDate }}</el-col>

      <el-col :span="4">
        <el-select v-model="airport" size="mini" placeholder="起飞机场" @change="runFilters">
          <el-option
            v-for="(item,index) in options.airport"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select v-model="flightTimes" size="mini" placeholder="起飞时间" @change="runFilters">
          <el-option
            v-for="(item,index) in options.flightTimes"
            :key="index"
            :label="`${item.from}:00 - ${item.to}:00`"
            :value="`${item.from},${item.to}`"
          ></el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select v-model="company" size="mini" placeholder="航空公司" @change="runFilters">
          <el-option
            v-for="(item,index) in options.company"
            :key="index"
            :label="item"
            :value="item"
          ></el-option>
        </el-select>
      </el-col>

      <el-col :span="4">
        <el-select v-model="airSize" size="mini" placeholder="机型" @change="runFilters">
          <el-option
            v-for="(item,index) in planeSize"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
    </el-row>

    <div class="filter-cancel">
      筛选：
      <el-button type="primary" plain round size="mini" @click="handleFiltersCancel">撤销</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      airport: "", // 起飞机场
      flightTimes: "", // 起飞时间
      company: "", // 航空公司
      airSize: "", // 机型大小
      planeSize: [
        { label: "大", value: "L" },
        { label: "中", value: "M" },
        { label: "小", value: "S" }
      ]
    };
  },

  props: {
    options: Object,
    flights: Array
  },

  // mounted () {
  //   console.log('传过来的缓存机票列表',this.flights);
  // },

  methods: {
    // 将所有的筛选器统一到一个函数中进行处理
    runFilters() {
      // 将父组件传过来的值(机票列表)存储到总缓存机票列表中
      // 方便所有筛选器进行筛选
      let newLists = [...this.flights];

      // 1.判断是否存在起飞机场数据
      // 如果有，将符合条件的存放给总缓存机票列表中
      if (this.airport) {
        newLists = newLists.filter(el => {
          return el.org_airport_name == this.airport;
        });
      }

      // 2.判断是否存在起飞时间数据
      // 如果有，将符合条件的存放给总缓存机票列表中
      if (this.flightTimes) {
        newLists = newLists.filter(el => {
          const from = Number(this.flightTimes.split(",")[0]);
          const to = Number(this.flightTimes.split(",")[1]);

          const planTime = Number(el.dep_time.split(":")[0]);
          return planTime >= from && planTime < to;
        });
      }

      // 3.判断是否存在航空公司数据
      // 如果有，将符合条件的存放给总缓存机票列表中
      if (this.company) {
        newLists = newLists.filter(el => {
          return el.airline_name == this.company;
        });
      }

      if (this.airSize) {
        newLists = newLists.filter(el => {
          return el.plane_size == this.airSize;
        });
      }

      // 最后发射给父组件
      // 让父组件将缓存数据复制给原始数据
      // 并渲染出符合用户筛选的数据
      this.$emit("setTicketList", newLists);
    },

    // 选择机场时候触发
    // handleAirport(value) {
    //   const newLists = this.flights.filter(el => {
    //     return el.org_airport_name == value;
    //   });

    //   this.$emit("setTicketList", newLists);
    // },

    // 选择出发时间时候触发
    // handleFlightTimes(value) {
    //   // console.log(value);
    //   const newLists = this.flights.filter(el => {
    //     const from = Number(value.split(",")[0]);
    //     const to = Number(value.split(",")[1]);

    //     const planTime = Number(el.dep_time.split(":")[0]);
    //     return planTime >= from && planTime < to;
    //   });

    //   this.$emit("setTicketList", newLists);
    // },

    // 选择航空公司时候触发
    // handleCompany(value) {
    //   const newLists = this.flights.filter(el => {
    //     return el.airline_name == value;
    //   });

    //   this.$emit("setTicketList", newLists);
    // },

    // 选择机型时候触发
    // handleAirSize(value) {
    //   // console.log(value);
    //   const newLists = this.flights.filter(el => {
    //     return el.plane_size == value;
    //   });

    //   this.$emit("setTicketList", newLists);
    // },

    // 撤销条件时候触发
    handleFiltersCancel() {
      // 将筛选项清除选中状态
      this.airport = "" // 起飞机场
      this.flightTimes = "" // 起飞时间
      this.company = "" // 航空公司
      this.airSize = "" // 机型大小

      // 最后调用统一筛选项刷新状态
      this.runFilters();
    }
  }
};
</script>

<style scoped lang="less">
.filters {
  margin-bottom: 20px;
}

.filters-top {
  > div {
    /deep/ .el-select {
      margin-left: 10px;
    }
  }
}

.filter-cancel {
  margin-top: 10px;
}
</style>